import { useState, useEffect, useRef } from 'react';
import type { NavItem, NavCategory, SystemConfig, NavigationVO } from '@/types';
import { webApi } from '@/services/api';

const DEFAULT_SYSTEM_CONFIG: SystemConfig = {
  siteTitle: 'Oasis 导航',
  siteLogo: '',
  defaultOpenMode: 'newTab',
  hideAdminEntry: false,
  adminUsername: 'admin',
  adminPassword: 'admin123',
};

export const useNavigation = () => {
  const [navItems, setNavItems] = useState<NavItem[]>([]);
  const [categories, setCategories] = useState<NavCategory[]>([]);
  const [systemConfig, setSystemConfig] = useState<SystemConfig>(DEFAULT_SYSTEM_CONFIG);
  const [loading, setLoading] = useState(true);

  // 只需要防止并发调用，不需要防止重新加载
  const isLoadingRef = useRef(false);
  const prevNavItemsRef = useRef<NavItem[]>([]);

  // 添加调试：监听 navItems 状态变化
  useEffect(() => {
    console.log('=== navItems 状态变化 ===');
    prevNavItemsRef.current = navItems;
  }, [navItems]);

  const loadNavItems = async () => {
    try {
      console.log('=== 开始调用导航接口 ===');

      const response = await webApi.getNavsPage({
        page: { pageNum: 1, pageSize: 100 }
      });


      // 检查响应结构
      if (!response || response.code !== 200 || !response.data || !response.data.rows) {
        console.error('导航接口响应结构异常:', response);
        setNavItems([]);
        return;
      }

      // NavigationVO 数组
      const navigationVOs = response.data.rows;

      // 转换 NavigationVO 到 NavItem 格式
      const convertedNavItems: NavItem[] = navigationVOs
        .filter((nav: NavigationVO) => nav.status === 1) // 只显示启用的导航项
        .map((nav: NavigationVO) => {
          const navItem: NavItem = {
            id: nav.id,
            name: nav.name,
            url: nav.url,
            sort: nav.sort,
            category: nav.category,
            icon: nav.icon,
            remark: nav.remark,
            lookAccount: nav.lookAccount,
            hasAccount: nav.hasAccount,
            status: nav.status,
          };

          return navItem;
        });

      setNavItems(convertedNavItems);

    } catch (error) {
      console.error('导航接口调用失败:', error);
      setNavItems([]);
    }
  };

  const loadCategories = async () => {
    try {
      console.log('=== 开始调用分类接口 ===');

      const response = await webApi.getCategory();

      // 检查响应结构
      if (!response || response.code !== 200 || !response.data) {
        console.error('分类接口响应结构异常:', response);
        setCategories([]);
        return;
      }

      // NavCategory 数组
      const categoryList = response.data;

      setCategories(categoryList);

    } catch (error) {
      console.error('分类接口调用失败:', error);
      setCategories([]);
    }
  };

  const loadSystemConfig = async () => {
    try {
      console.log('=== 开始调用站点信息接口 ===');

      const response = await webApi.getSiteInfo();

      // 检查响应结构
      if (!response || response.code !== 200 || !response.data) {
        setSystemConfig(DEFAULT_SYSTEM_CONFIG);
        return;
      }

      // SiteInfo 对象
      const siteInfo = response.data;

      // 转换为 SystemConfig 格式
      setSystemConfig({
        siteTitle: siteInfo.siteTitle || DEFAULT_SYSTEM_CONFIG.siteTitle,
        siteLogo: siteInfo.siteLogo || DEFAULT_SYSTEM_CONFIG.siteLogo,
        defaultOpenMode: siteInfo.defaultOpenMode === 0 ? 'currentTab' : 'newTab',
        hideAdminEntry: siteInfo.hideAdminEntry === 1,
        adminUsername: DEFAULT_SYSTEM_CONFIG.adminUsername,
        adminPassword: DEFAULT_SYSTEM_CONFIG.adminPassword,
      });

    } catch (error) {
      console.error('站点信息接口调用失败:', error);
      setSystemConfig(DEFAULT_SYSTEM_CONFIG);
    }
  };

  const loadData = async () => {
    console.log('=== loadData 函数被调用 ===');
    console.log('isLoadingRef.current:', isLoadingRef.current);

    // 只防止并发调用，不阻止重新加载
    if (isLoadingRef.current) {
      console.log('数据正在加载中，跳过并发调用');
      return;
    }

    console.log('开始设置 loading 状态...');
    isLoadingRef.current = true;
    setLoading(true);

    console.log('开始加载导航数据...');

    // 独立调用三个接口，避免相互影响
    try {
      console.log('调用 loadNavItems...');
      await loadNavItems();
    } catch (error) {
      console.error('loadNavItems 失败:', error);
    }

    try {
      console.log('调用 loadCategories...');
      await loadCategories();
    } catch (error) {
      console.error('loadCategories 失败:', error);
    }

    try {
      console.log('调用 loadSystemConfig...');
      await loadSystemConfig();
    } catch (error) {
      console.error('loadSystemConfig 失败:', error);
    }

    console.log('导航数据加载完成');
    isLoadingRef.current = false;
    setLoading(false);
  };

  useEffect(() => {
    console.log('useNavigation hook useEffect 执行');
    loadData();

    return () => {
      // 清理函数，重置加载标志
      isLoadingRef.current = false;
      console.log('useNavigation hook 清理完成');
    };
  }, []); // 空依赖数组，确保只在组件挂载时执行一次

  // 提供刷新功能
  const refresh = async () => {
    console.log('手动刷新导航数据');
    await loadData();
  };

  return {
    navItems,
    setNavItems,
    categories,
    setCategories,
    systemConfig,
    setSystemConfig,
    loading,
    refresh,
  };
};
